<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>欢迎页面-X-admin2.2</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/xadmin.css">
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
</head>
<script type="text/html" id="barDemo">
	 {{#  if(d.ghStatus == 0){ }}
        <a class="layui-btn layui-btn-xs" lay-event="edit">客房预订</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="open">开房</a>
    {{#  } else if(d.ghStatus == 1) { }}
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">入住详情</a>
     	<a class="layui-btn layui-btn-xs" lay-event="del">退房</a>
    {{#  } }}
</script>
<body>
	<div class="demoTable">
		客房编号：
		<div class="layui-inline">
			<input class="layui-input" name="ghId" id="demoReload"
				autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload" lay-filter="searchSubmit">搜索</button>
	</div>

	<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
</body>
<script>
	layui.use('table', function() {
		var table = layui.table;

		//方法级渲染
		table.render({
			elem : '#LAY_table_user',
			url : '/toGuestHome/getToGuestHome',
			cols : [ [ {
				field : 'ghId',
				title : '客房编号',
				width : 100,
				fixed : true,
				align : "center"
			}, {
				field : 'ghThemeId',
				title : '名宿主题',
				width : 200,
				align : "center",
				templet : function(res) {
					if (res.ghThemeId == 0) {
						return "田园风";
					} else if (res.ghThemeId == 1) {
						return "极简风";
					} else if (res.ghThemeId == 2) {
						return "工业风";
					} else if (res.ghThemeId == 3) {
						return "禅意风";
					} else if (res.ghThemeId == 4) {
						return "民族风";
					} else if (res.ghThemeId == 5) {
						return "复古风";
					}
					return "返回错误数据";
				}
			}, {
				field : 'ghPhoneBedroom',
				title : '卧室照片',
				width : 200,
				sort : true,
				align : "center",
				templet : function(res) {
					if (res.ghPhoneBedroom != null) {
						return res.ghPhoneBedroom;
					}
					return "无数据";
				}
			}, {
				field : 'ghPhoneToile',
				title : '厕所照片',
				width : 200,
				align : "center",
				templet : function(res) {
					if (res.ghPhoneToile != null) {
						return res.ghPhoneToile;
					}
					return "无数据";
				}
			}, {
				field : 'ghPhoneRest',
				title : '其他照片',
				width : 200,
				templet : function(res) {
					if (res.ghPhoneRest != null) {
						return res.ghPhoneRest;
					}
					return "无数据";
				},
				align : "center"
			}, {
				field : 'ghHouseTypeId',
				title : '房型id（房型表）',
				sort : true,
				width : 200,
				align : "center",
				templet : function(res) {
					if (res.ghHouseTypeId == 1) {
						return "一室一厅";
					} else if (res.ghHouseTypeId == 2) {
						return "两室一厅";
					} else if (res.ghHouseTypeId == 3) {
						return "三室一厅";
					}
					return "返回错误数据";
				}
			}, {
				field : 'ghMoney',
				title : '租金/天',
				sort : true,
				width : 150,
				align : "center"
			}, {
				field : 'ghStatus',
				title : '是否预定',
				sort : true,
				width : 200,
				align : "center",
				templet : function(res) {
					if (res.ghStatus == 0) {
						return "未预定";
					} else if (res.ghStatus == 1) {
						return "已预订";
					}
					return "返回错误数据";
				}
			}, {
				fixed : 'right',
				title : '操作',
				toolbar : '#barDemo',
				width : 250,
				align : "center"
			} ] ],
			id : 'testReload',
			limit : 5,//一页展示多少条数据
			page : true,//是否开启分页
			height : 310
		//高度
		});

		var $ = layui.$, active = {
			reload : function() {
				var demoReload = $('#demoReload');

				//执行重载
				table.reload('testReload', {
					page : {
						curr : 1
					//重新从第 1 页开始
					},
					where : {
						"ghId" : demoReload.val()
					}
				}, 'data');
			}
		};

		$('.layui-btn').on('click', function() {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});

		//监听行工具事件
		table.on('tool(test)', function(obj) {
			var data = obj.data;
			//console.log(obj)
			if (obj.event === 'del') {//退房
				del(obj);
			} else if (obj.event === 'edit') {//入住信息
				edit(obj);
			} else if (obj.event === 'open') {//开房
				open(obj);
			} else if (obj.event === 'detail') {//客房预定
				detail(obj);
			}
		});
	});

	function del(obj) {//退房
		
	}
	function edit(obj) {//入住信息

	}
	function open(obj) {//开房
		 window.formData = data;//获取当前行的数据传到到下一个页面
		 layer.open({//打开一个窗口
			type : 2,
			title : '涂涂民宿-开房',
			// 当type: 2 时就是url
			content : 'tenant-add.html',
			// 宽高：如果是100%就是满屏
			area : [ "100%", "100%" ],
			maxmin : true,
			offset : 't',
			success : function(layero, index) {
			}
		});
	 }
	}
	
	function detail(obj) {//客房预定
		window.formData = data;//获取当前行的数据传到到下一个页面
		layer.open({//打开一个窗口
			type : 2,
			title : '涂涂民宿-客房预定',
			// 当type: 2 时就是url
			content : 'tenant-add.html',
			// 宽高：如果是100%就是满屏
			area : [ "100%", "100%" ],
			maxmin : true,
			offset : 't',
			success : function(layero, index) {
			}
		});
	  }
	}
</script>

</html>